<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//Dtd HTML 4.01 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>用户注册</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Free HTML5 Template by FreeHTML5.co" />
	<meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />
	
  	<!-- Facebook and Twitter integration -->
	<meta property="og:title" content=""/>
	<meta property="og:image" content=""/>
	<meta property="og:url" content=""/>
	<meta property="og:site_name" content=""/>
	<meta property="og:description" content=""/>
	<meta name="twitter:title" content="" />
	<meta name="twitter:image" content="" />
	<meta name="twitter:url" content="" />
	<meta name="twitter:card" content="" />

	<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
	<link rel="shortcut icon" href="favicon.ico">

	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
	
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/animate.css">
	<link rel="stylesheet" href="css/style.css">
	
	<script type="text/javascript" src="easyui/jquery.min.js" ></script>
	<script type="text/javascript" src="easyui/jquery.easyui.min.js" ></script>
	<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
	<link rel="stylesheet" href="easyui/themes/default/easyui.css" />
	<link rel="stylesheet" href="easyui/themes/icon.css" />
	
	<!-- Modernizr JS -->
	<script src="js/modernizr-2.6.2.min.js"></script>
	
<style type="text/css">
        .code
        {
         
            background-image:url(code.jpg);
            font-family:Arial;
            font-style:italic;
            color:Red;
            border:0;
            padding:2px 3px;
            letter-spacing:3px;
            font-weight:bolder;
        }
        .unchanged
        {
            border:0;
        }
    </style>
    <script language="javascript" type="text/javascript">
    	
    	
    	$.extend($.fn.validatebox.defaults.rules, {   
		    phoneNum: { //验证手机号  
		        validator: function(value, param){
		         return /^1[3-8]+\d{9}$/.test(value);
		        },   
		        message: '请输入正确的手机号码。'  
    		},
    		username: { //验证姓名  
		        validator: function(value, param){
		        return /^[a-zA-Z0-9\u4E00-\u9FA5]+$/.test(value);
		        },   
		        message: '只能包括中文字、英文字母、数字。'  
    		},
    	});
    
     var code ; //在全局 定义验证码
     function createCode()
     { 
       code = "";
       var codeLength = 6;//验证码的长度
       var checkCode = document.getElementById("checkCode");
       var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候选组成验证码的字符，当然也可以用中文的
        
       for(var i=0;i<codeLength;i++)
       {
      
        
       var charIndex = Math.floor(Math.random()*36);
       code +=selectChar[charIndex];
       
       
       }
//       alert(code);
       if(checkCode)
       {
         checkCode.className="code";
         checkCode.value = code;
       }
       
     }
     
      function validate ()
     {
       var inputCode = document.getElementById("input1").value;
       if(inputCode.length <=0)
       {
       	alert("请输入验证码");
           document.getElementById("yzm").innerText="请输入验证码！";
           return false;

       }
       else if(inputCode != code )
       {
        //document.getElementById("yzm").innerText="验证码输入错误！";
         alert("验证码输入错误！");
          createCode();//刷新验证码
          return false;
       }
       else
       {
       	alert("chenggong");
       	$("#registerForm").submit();
        }
     }
    </script>
	</head>
	<body onload="createCode() "class="style-3">
			<div class="row">
				<div class="col-md-4 col-md-push-8">
			
					<!-- Start Sign In Form -->
					<form id = "registerForm" action="${pageContext.request.contextPath }/user/register" class="fh5co-form animate-box" data-animate-effect="fadeInRight" >
						<h2>用户注册</h2>
						<div class="form-group">
							<div class="alert alert-success" role="alert">请确保输入的信息真实</div>
						</div>
						<div class="form-group">
							
							<!--<input class="easyui-textbox" id="phone" name="basic.phone" data-options="prompt:'请输入正确的手机号码。',validType:'phoneNum'" />-->
							<input id="phone" class="easyui-textbox" validType='phoneNum' name="phone" data-options="required:true,prompt:'手机号码'"  
                            		missingMessage="电话不能空" type="text">  
						</div>
						<div class="form-group">
							<input id="username" class="easyui-textbox" validType='username' name="username" data-options="required:true,prompt:'姓名'"  
                            		missingMessage="姓名不能空" type="text">  
						</div>
						<div class="form-group">							
							 <input id="email" class="easyui-textbox" validType='email' name="email" data-options="required:true,prompt:'邮箱'"  
                            		missingMessage="邮箱不能为空" invalidMessage="请输入正确的qq邮箱" type="text">  	
						</div>
						<div class="form-group">
							<input id="password" class="easyui-textbox" name="password" data-options="required:true,prompt:'密码'"  
                            		missingMessage="密码不能空" type="password">
						</div>
						<!--<div class="form-group">
							<label for="re-password" class="sr-only">再次输入密码</label>
							<input type="password" class="form-control" id="re-password" placeholder="Re-type Password" autocomplete="off">
						</div>-->
						<div class="form-group">
							<input id="address" class="easyui-textbox" name="address" data-options="required:true,prompt:'地址'"  
                            		missingMessage="地址不能空" type="text">						
						</div>
							<div class="form-group">
							<label for="address" class="sr-only">code</label>
							<input type="text" class="form-control" id="input1" placeholder="验证码" autocomplete="off">
						 <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 100px"  /> 
							</div>
						<!--<div class="form-group">
							<label for="remember"><input type="checkbox" id="remember"> 记住账号密码</label>
						</div>-->
						<div class="form-group">
							<p>已注册账号？ <a href="login.html">登陆</a></p>
						</div>
						<div class="form-group">
							<input id="Button1"  onclick="validate();" type="submit" value="注册" class="btn btn-primary">
							 <input type="reset"  value="清空" class="btn btn-primary"/> 
						</div>
					</form>
					<!-- END Sign In Form -->


				</div>
			</div>
			<div class="row" style="padding-top: 60px; clear: both;">
				<div class="col-md-12 text-center"><p><small>&copy; 欢迎来到<a href="" target="_blank" title="mark">mark</a> <a href="" title="限于" target="_blank">咸鱼</a></small></p></div>
			</div>
		</div>
	
	<!-- jQuery -->
	<script src="js/jquery.min.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Placeholder -->
	<script src="js/jquery.placeholder.min.js"></script>
	<!-- Waypoints -->
	<script src="js/jquery.waypoints.min.js"></script>
	<!-- Main JS -->
	<script src="js/main.js"></script>

	</body>
</html>

